<template>
	<view>
		<view class="search-box">
			<u-search placeholder="请输入选手名称" shape='square' :action-style='actionStyle' @search="$initPage"
				@custom="$initPage" v-model="searchName"></u-search>
		</view>
		<view class="content-list">
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<view class="item_img" @click="seeDetail(item)">
					<image class="img" :src="item.img?item.img.split(',')[0]:''" mode="aspectFill"></image>
					<view class="vote_num">票数：{{item.num || 0}}</view>
				</view>
				<view class="sign_box" v-if="item.code.length > 4?false:true">
					<image class="item-icon" src="../../static/icon.png"></image>
					<text class="item-num u-line-1">{{item.code | numFilter()}}</text>
				</view>
				<view class="iten-box">
					<view class="name u-line-1">{{item.name}}</view>
					<view class="btn" @click.stop="onShowVote(item,index)">给TA投票</view>
				</view>
			</view>
		</view>

		<voting-window ref='ViteRef' v-model="voteNum" @onSumbitVote='onSumbitVote' :dataForm="dataForm" />

		<sww-load-more loadMoreText="点击查看更多" :params="dataListParams" @load="loadMore" :loadText="loadText" />

	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js'

	import votingWindow from './votingWindow'
	export default {
		mixins: [pagingMixin],
		components: {
			votingWindow
		},
		data() {
			return {
				viteObj: {},
				searchName: '',
				voteNum: 1,
				actionStyle: {
					width: '116rpx',
					height: '70rpx',
					borderRadius: '10rpx',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
					color: '#fff',
					backgroundColor: '#E8202D'
				},
				isUser:true
				// dataList: [],
				// page: 1,
				// pageCount: 1,
				// page_size: 10
			};
		},
		props: {
			activityId: {
				type: Number,
				default: 0
			},
			activityStatus: {
				type: Number,
				default: 3
			},
			dataForm: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		filters: {
			numFilter(num) {
				if (num.length == 1) {
					return '0' + num
				} else {
					return num.substr(0, 4)
				}
			}
		},
		mounted() {
			this.$initPage()
		},
		methods: {
			$initPage() {
				// this.page = 1
				// this.dataList = []
				// this.getDataList()
				if(this.dataForm.end_date < new Date().getTime()){
					this.isUser = false
				}
				this._init_data('GetVoteInfoPlayerList', {
					name: this.searchName || '',
					pk_id: this.activityId
				})
			},

			loadMore() {
				// if (this.pageCount > this.page) {
				// 	this.page += 1
				// 	this.getDataList()
				// }
				this._load_data()
			},
			// getDataList() {
			// 	this.$loading()
			// 	this.$resPost('GetVoteInfoPlayerList', {
			// 		pk_id: this.activityId,
			// 		name: this.searchName || '',
			// 	}).then((res) => {
			// 		this.dataList = [].concat(res.data || [])
			// 		this.pageCount = res.pageCount
			// 		this.$hide()
			// 	})
			// },
			seeDetail(item) {
				this.$linkTo(`/package/activity/vote/detail/index?id=${item.pk_id}&activityId=${this.activityId}`)
			},
			// 投票

			onShowVote(item, index) {
				if(!this.isUser){
					return this.$toast('活动已结束')
				}
				this.voteNum = 1
				this.viteObj = {
					item,
					index
				}
				this.$refs.ViteRef.onVoteShow()
			},

			onSumbitVote() {
				let {
					item,
					index
				} = this.viteObj
				this.goVote(item, index)
			},

			goVote(item, index) {

				let voteNum = Number(this.voteNum)
				if (this.$isLogin()) {
					// 是否在活动时间内
					if (this.activityStatus == 1) {
						if (this.dataForm.vote_every_day == 1) {
							// voted_num:'当前用户今天已投数量'
							// voted_count: 当前用户总已投数量
							// dataForm.num 免费投票次数
							if (this.dataForm.useSendNum > 0) {
								uni.showModal({
									content: `确定投他${voteNum}票？`,
									success: (res) => {
										if (res.confirm) {
											this.$loading()
											this.$resPost('AddUserVoting', {
												pk_id: this.activityId,
												player_id: item.pk_id,
												num: voteNum
											}).then(() => {
												this.dataList[index].num += voteNum
												this.$emit('voteFinish', {
													name: 'voted_num',
													num: voteNum
												})
												this.$hide()
												this.$toast('投票成功')
											}).catch(() => {
												
											})
										}
									}
								})
							} else {
								this.$toast('今天的次数已用完')
							}
						} else {
							if (this.dataForm.useSendNum > 0) {
								uni.showModal({
									content: `确定投他${voteNum}票？`,
									success: (res) => {
										if (res.confirm) {
											this.$loading()
											this.$resPost('AddUserVoting', {
												pk_id: this.activityId,
												player_id: item.pk_id,
												num: voteNum
											}).then(() => {
												this.dataList[index].num += voteNum
												this.$emit('voteFinish', {
													num: voteNum
												})
												this.$hide()
												this.$toast('投票成功')
											}).catch(() => {
												
											})
										}
									}
								})

							} else {
								this.$toast('投票次数已用完')
							}
						}
					} else if (this.activityStatus == 2) {
						this.$toast('活动已结束')
					} else {
						this.$toast('活动未开始')
					}
				} else {
					this.$emit('toLogin')
				}

			}
		},
	};
</script>

<style scoped lang="scss">
	.search-box {
		padding: 0 30rpx;

	}



	.content-list {
		padding: 20rpx 24rpx 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.item {
			width: calc(50% - 12rpx);
			border-radius: 20rpx 20rpx 10rpx 10rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 24rpx;

			.sign_box {
				position: absolute;
				top: 0;
				left: 0;
				width: 80rpx;
				height: 100rpx;

				.item-num {
					font-size: 30rpx;
					position: absolute;
					width: 100%;
					text-align: center;
					top: 40%;
					left: 0;
					color: #fff;
					transform: translateY(-50%);
				}
			}

			.item_img {
				height: 0;
				padding-bottom: 100%;
				position: relative;

				.img {
					position: absolute;
					top: 0;
					left: 0;
				}

				.vote_num {
					position: absolute;
					left: 0;
					width: 100%;
					bottom: 0;
					line-height: 58rpx;
					color: #fff;
					font-size: 26rpx;
					background-color: rgba(0, 0, 0, .5);
					text-align: center;
				}
			}

			.iten-box {
				background-color: #fff;
				padding: 14rpx 16rpx 16rpx;
				text-align: center;

				.btn {
					margin-top: 14rpx;
					width: 300rpx;
					line-height: 46rpx;
					text-align: center;
					border-radius: 10rpx;
					background-color: #31ACF2;
					color: #fff;
				}
			}
		}
	}
</style>
